<template>
  <div @keyup.enter="submitForm()">
    <el-form :model="passForm" status-icon ref="passForm" class="passForm">
      <el-form-item prop="username">
        <el-input
          prefix-icon="el-icon-user"
          placeholder="请输入手机号/邮箱"
          type="text"
          clearable
          v-model="passForm.username"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          prefix-icon="el-icon-lock"
          placeholder="请输入密码"
          type="password"
          show-password
          v-model="passForm.password"
          autoComplete="new-password"
        ></el-input>
      </el-form-item>
      <div class="operate-pass">
        <div>
          <el-checkbox v-if="useRememberPass" v-model="rememberPass"
            >记住密码</el-checkbox
          >
        </div>
        <div><a class="forget-pass" @click="forgotPassword">忘记密码?</a></div>
      </div>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm()"
          :disabled="isBadSubmit"
          :loading="loading"
          >{{ submitText }}</el-button
        >
      </el-form-item>
    </el-form>
    <div class="signin-now" v-if="useSignNow">
      还没有账号 ？ <a @click="signIn">立即注册</a>
    </div>
  </div>
</template>

<script>
import { getRSAKey, loginByPass } from 'api/modules/login.api';
// rsa的key失效的返回code
const RSA_FAIL_CODE = -518;
export default {
  data() {
    return {
      passForm: {
        username: '',
        password: '',
      },
      rememberPass: false,
      badSubmit: true,
      loading: false,
    };
  },
  props: {
    useSignNow: {
      type: Boolean,
      default: true,
    },
    useRememberPass: {
      type: Boolean,
      default: false,
    },
    submitText: {
      type: String,
      default: '登录',
    },
    linkFlag: {
      type: Boolean,
      default: false,
    },
    notUseLoginPost: {
      type: Boolean,
      default: false,
    },
    defaultAccount: {
      type: String,
      default: '',
    },
    defaultPassword: {
      type: String,
      default: '',
    },
    isCheckedRemember: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.passForm.username = this.defaultAccount;
    this.passForm.password = this.defaultPassword;
    this.rememberPass = this.isCheckedRemember;
  },
  computed: {
    isBadSubmit() {
      const { username, password } = this.passForm;
      return !username || !password;
    },
  },
  methods: {
    // 忘记密码
    forgotPassword() {
      this.$loginUtils.toCloud(
        this.globalProcessData.getUrl().crmUrl,
        'toUpdateUserPwdOne'
      );
    },
    // 立即注册
    signIn() {
      this.$loginUtils.toCloud(
        this.globalProcessData.getUrl().crmUrl,
        'toUserRegisterOne?channel=th_web'
      );
    },
    // 登录接口publicKeyCode无效，重新获取
    async rsaFailure() {
      const { data } = await getRSAKey();
      if (!data) {
        this.$message.error('系统异常，请刷新重试');
        return;
      }
      this.submitForm(data);
    },
    async submitForm(newKey) {
      // 如果格式不正确，就不允许登录 (防止回车登录的)
      if (this.isBadSubmit) {
        return;
      }
      this.loading = true;
      if (!newKey && !this.globalProcessData.getPublicKey()) {
        this.rsaFailure();
        return;
      }
      const { username, password } = this.passForm;
      const params = {
        data: {
          username,
          password: this.$loginUtils.getCode(
            password,
            newKey || this.globalProcessData.getPublicKey()
          ),
          publicKey: newKey || this.globalProcessData.getPublicKey(),
          linkFlag: this.linkFlag,
        },
        loginType: 'web',
      };
      this.$set(params, 'mode', 'passLogin');
      this.$emit('beforeLogin', { data: { password, username } });
      if (this.notUseLoginPost) {
        return;
      }
      const response = await loginByPass(params).catch(() => {});
      const { data, code, msg } = response;
      // 如果是失效的话重新获取key，并登录
      if (code === RSA_FAIL_CODE) {
        this.rsaFailure();
        return;
      }
      if (code !== 0) {
        this.$message.error(msg);
        this.loading = false;
      } else {
        this.$set(data, 'rememberPass', this.rememberPass);
      }
      this.$emit('submitForm', response);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped></style>
<style lang="less">
.signin-now {
  font-size: 12px;
  color: #909399;
  text-align: center;
  > a {
    color: #0080ff;
    position: relative;
    cursor: pointer;
    &:hover {
      color: #0062ff;
    }

    &:hover::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
      bottom: 0;
      border-bottom: 1px solid #0062ff;
    }
  }
}
.passForm {
  .operate-pass {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;

    .el-checkbox__label {
      font-size: 12px;
      color: #606266;
    }
    .forget-pass {
      font-size: 12px;
      color: #606266;
      position: relative;
      cursor: pointer;
    }
    .forget-pass:hover {
      color: #0062ff;
    }

    .forget-pass:hover::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
      bottom: 0;
      border-bottom: 1px solid #0062ff;
    }
  }
}
</style>
